<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qq登录导航条</title>

    <link rel="stylesheet" href="css/北大青鸟课程导航.css">

    <style>



    #heard{width:100%;
        height: 60px;
        background-color: #666666}
        img{height: 60px;width: 90px}


       .img , .introduce ul li{float: left;  /* 这个是把图片和li同时浮动，用的是 逗号“，”并集选择器*/
          font-size: 14px;
          line-height: 60px;
          padding-left:40px;}

           .introduce ul li:nth-of-type(8){float: right;
            padding-right:50px; }


        .introduce ul li:nth-of-type(9){float: right;padding-right: 80px}
        .introduce, .img{padding-left: 50px}
        .introduce ul li a{color: white;text-decoration: none}
        .introduce ul li a:hover{color: blue}


            p,.to-right{display: inline-block;}

              .to-right p{height: 60px;line-height: 60px;text-align: center}

              .to-right{margin-left: 180px;}

               .to-right p a{color: white;
                text-decoration: none;
                width:30px;height: 30px;

                margin-right: 50px;}

              .to-right p a:hover{color: darkcyan}
              .to-right p {margin-right: 50px; width:100px;height: 30px;border:1px solid yellow;}




    </style>
    
</head>
<body>

<div id="heard">


    <div class="img"> <img src="img/qq.png"width="180" height="90"> </div>

<div class="introduce">
<ul>
    <li><a href="#">  功能特权   </a>         </li>
    <li><a href="#">  游戏特权   </a>         </li>
    <li><a href="#">  生活特权   </a>         </li>
    <li><a href="#">  会员活动   </a>         </li>
    <li><a href="#">  成长体系   </a>         </li>
    <li><a href="#">  年费专区   </a>         </li>
    <li><a href="#">  超级会员   </a>         </li>
</ul>
</div>

    <div class="to-right">
        <p><a href="#">登录</a></p>
        <p><a href="#">会员登录</a></p>

    </div>
</div>


</body>
</html>